import React, { Component } from "react";
import { Form, Input, Button, Checkbox } from "antd";
import axios from "../../util/axios";
class Login extends Component {
  componentDidMount() {
    sessionStorage.clear();
    localStorage.clear();
  }
  onFinish = (values) => {
    axios
      .get(`/login?username=${values.username}&password=${values.password}`)
      .then((res) => {
        if (res.data.code === 200) {
          window.localStorage.setItem("token", res.data.token);
          window.sessionStorage.setItem("authName", res.data.data.nickname);
          window.sessionStorage.setItem("auth", res.data.data.username);
          this.props.history.push("/home");
        } else {
          alert("登陆失败");
        }
      });
  };
  render() {
    return (
      <div className="login">
        <div className="loginInner">
          <h3 className="loginTitle">欢迎来到电商后台管理系统</h3>
          <div className="form">
            <Form
              name="basic"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 16,
              }}
              initialValues={{
                remember: true,
              }}
              onFinish={this.onFinish}
              autoComplete="off"
            >
              <Form.Item
                label="Username"
                name="username"
                rules={[
                  {
                    required: true,
                    message: "Please input your username!",
                  },
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="Password"
                name="password"
                rules={[
                  {
                    required: true,
                    message: "Please input your password!",
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>

              <Form.Item
                name="remember"
                valuePropName="checked"
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Checkbox>Remember me</Checkbox>
              </Form.Item>

              <Form.Item
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    );
  }
}

export default Login;
